<template>
  <div id="musicasidebar">
    <ol class="musicasidelist">
      <span>推荐</span>
      <li><i class="el-icon-s-grid"></i><span class="listtext" @click="getrotertuij">推荐</span></li>
      <li><i class="el-icon-s-order"></i><span class="listtext">歌单</span></li>
      <li><i class="el-icon-video-camera-solid"></i><span class="listtext">直播</span></li>
      <li><i class="el-icon-s-help"></i><span class="listtext" >动态</span></li>
    </ol>

    <ol class="musicasidelist">
      <span>我的音乐</span>
      <li><i class="el-icon-s-grid"></i><span class="listtext">我的音乐云盘</span></li>
      <li><i class="el-icon-s-order"></i><span class="listtext">我的电台</span></li>
      <li><i class="el-icon-video-camera-solid"></i><span class="listtext">我的收藏</span></li>
    </ol>

    <ol class="musicasidelist">
      <span>创建的歌单</span>
      <li v-for="item in usercreateplaylist" :key="item.id" @click="toplaylistid(item.id)"><span class="listtext">{{item.name}}</span></li>
    </ol>


    <ol class="musicasidelist">
      <span>收藏的歌单</span>
      <li v-for="item in userstoreupplaylist" :key="item.id" @click="toplaylistid(item.id)"><span class="listtext">{{item.name}}</span></li>
    </ol>

  </div>
</template>

<script>
import {getlikelist} from '../../network/profile'


export default {
  name: 'MusicAsideBar',
  data() {
    return {
      //用户歌单数组
      userplaylist:[],
    }
  },
  methods: {
    getrotertuij() {
      this.$router.push('/recommend')
    },
    //进入路由传入歌单ID
    toplaylistid(id) {
      this.$router.push({
        path: '/playlist',
        query: {
          id
        }
      })
    },
  },
  computed: {
    //filter方法--返回创建的歌单列表
    usercreateplaylist() {
      let x = this.$store.state.profile.playlist.filter((val, index) =>{
        //console.log(x);
        return val.subscribed == false
      })
      //console.log(x);
      return x
    },
    //filter方法--返回收藏的歌单列表
    userstoreupplaylist() {
      let x = this.$store.state.profile.playlist.filter((val, index) =>{
        //console.log(x);
        return val.subscribed == true
      })
      //console.log(x);
      return x
    }
  },
}
</script>

<style>
#musicasidebar {
  width: 10vw;
  height: 67vh;
  box-shadow: 1px 0 0px rgb(197, 197, 197);
  border-radius: 0 0 0 1rem;
  border-top: 1px solid transparent;
  overflow:auto;
}
.musicasidelist {
  margin: 0.5rem 1rem 0rem 0;
  padding: 0 0 0 0.8rem;
}
.musicasidelist li {
  height: 1.3rem;
  list-style: none;
  margin: 0.5rem 0;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:0.5rem 0;
}
.musicasidelist li:hover {
  background-color: rgb(233, 233, 233);
  border-radius: 5px;
}
.musicasidelist li span, .musicasidelist li i{
  cursor:pointer
}
.listtext {
  padding-left: 0.5rem;
}


/* 滚顶的scrollbar样式*/
::-webkit-scrollbar {
  width: 0.3rem;
  height: 0;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(0, 64, 125, .3);
  background-color: rgba(82, 82, 82, 0.3);
}
</style>